import React, { useEffect, useState } from "react";
import {
  Form,
  Input,
  InputNumber,
  Switch,
  Button,
  Upload,
  Select,
  message,
  DatePicker,
  Table,
  Space,
} from "antd";
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import type { UploadFile } from "antd/es/upload/interface";
import { handleRes } from "@/utils/request";
import type { ProductItem, PriceHistoryItem } from "../data";
import {
  ProForm,
  ProFormText,
  ProFormDigit,
  ProFormSelect,
  ProFormSwitch,
  ProFormTextArea,
  ProFormDatePicker,
} from "@ant-design/pro-components";
import moment from "moment";
import { api } from "@/utils/env";
import PriceHistoryTable from "./PriceHistoryTable";
import { productApi, uploadApi } from "../api";
const { TextArea } = Input;
import { brandApi } from "@/pages/products/brand/api";
import { categoryApi } from "../../category/api";

interface ApiResponse<T> {
  success: boolean;
  data: {
    list: T[];
  };
}

interface ProductFormProps {
  initialValues?: Partial<ProductItem>;
  onFinish: (values: ProductItem) => void;
}

interface ExtendedPriceHistoryItem extends PriceHistoryItem {
  _id?: string;
}

const ProductForm: React.FC<ProductFormProps> = ({
  initialValues,
  onFinish,
}) => {
  const [form] = Form.useForm();
  const [categories, setCategories] = useState<any[]>([]);
  const [brands, setBrands] = useState<any[]>([]);
  const [mainImageUrl, setMainImageUrl] = useState<string>();
  const [imageList, setImageList] = useState<UploadFile[]>([]);
  const [selectedCategoryName, setSelectedCategoryName] = useState<string>("");
  const [selectedBrandName, setSelectedBrandName] = useState<string>("");
  const [priceHistory, setPriceHistory] = useState<ExtendedPriceHistoryItem[]>(
    []
  );
  const [editingPrice, setEditingPrice] = useState<boolean>(false);

  // 获取分类列表
  const fetchCategories = async () => {
    const res = await handleRes({
      api: categoryApi.getList,
      data: {
        page: 1,
        pageSize: 1000,
      },
    });
    const categoryList = res.list;
    setCategories(categoryList);
    return categoryList.map((item: any) => ({
      label: item.name,
      value: item.id,
    }));
  };

  // 获取品牌列表
  const fetchBrands = async (categoryId?: string) => {
    if (!categoryId) {
      setBrands([]);
      return;
    }
    const res = await handleRes({
      api: brandApi.getList,
      data: {
        page: 1,
        pageSize: 1000,
      },
    });
    setBrands(res.list);
  };

  // 初始化数据和处理初始值
  useEffect(() => {
    const init = async () => {
      // 如果有初始值，设置表单数据
      if (initialValues) {
        // 设置表单字段值
        form.setFieldsValue(initialValues);

        // 设置主图
        setMainImageUrl(initialValues.mainImage);

        // 设置分类和品牌名称
        if (initialValues.categoryName) {
          setSelectedCategoryName(initialValues.categoryName);
        }
        if (initialValues.brandName) {
          setSelectedBrandName(initialValues.brandName);
        }

        // 设置图片列表
        if (initialValues.images && initialValues.images.length > 0) {
          const processedImages: UploadFile[] = initialValues.images.map(
            (url) => ({
              uid: url,
              name: url.split("/").pop() || "",
              status: "done" as const,
              url: getDisplayUrl(url),
              thumbUrl: getDisplayUrl(url),
            })
          );
          setImageList(processedImages);
        }

        // 如果有分类ID，获取对应的品牌列表
        if (initialValues.categoryId) {
          await fetchBrands(initialValues.categoryId);
        }

        // 设置价格历史
        if (initialValues.priceHistory) {
          const processedPriceHistory: ExtendedPriceHistoryItem[] =
            initialValues.priceHistory.map((item) => ({
              _id: item._id,
              date: item.date,
              marketPrice: item.marketPrice || 0,
              purchasePrice: item.purchasePrice || 0,
              shareRatio: item.shareRatio || 0.3,
              recoveryPrice: item.recoveryPrice || 0,
              platformProfit: item.platformProfit || 0,
              userProfit: item.userProfit || 0,
            }));
          setPriceHistory(processedPriceHistory);
        }
      }
    };

    init();
  }, []); // 只在组件挂载时执行一次

  // 处理图片URL显示
  const getDisplayUrl = (url: string | undefined) => {
    if (!url) return "";
    // 如果已经是完整URL，直接返回
    if (url.startsWith("http")) return url;
    // 如果是相对路径，添加域名
    return `${api}${url.startsWith("/") ? url : `/${url}`}`;
  };

  // 获取相对路径（去掉域名）
  const getRelativePath = (url: string | undefined) => {
    if (!url) return "";
    // 如果包含域名，去掉域名部分
    const relativePath = url.replace(api, "");
    // 确保路径以/开头
    return relativePath.startsWith("/") ? relativePath : `/${relativePath}`;
  };

  // 处理主图上传
  const handleMainImageUpload = async (options: any) => {
    const { file, onSuccess, onError } = options;
    const formData = new FormData();
    formData.append("folder", "products/main");
    formData.append("file", file);

    try {
      const res = await handleRes({
        api: uploadApi.single,
        data: formData,
      });
      if (res?.url) {
        const imageUrl = res.url;
        setMainImageUrl(imageUrl);
        // 存储相对路径
        form.setFieldsValue({ mainImage: getRelativePath(imageUrl) });
        onSuccess();
      } else {
        onError();
        message.error("上传失败");
      }
    } catch (error) {
      onError();
      message.error("上传失败");
    }
  };

  // 处理图片列表上传
  const handleImagesUpload = async (options: any) => {
    const { file, onSuccess, onError } = options;
    const formData = new FormData();
    formData.append("folder", "products/list");

    if (Array.isArray(file)) {
      file.forEach((f) => {
        formData.append("files", f);
      });
    } else {
      formData.append("files", file);
    }

    const res = await handleRes({
      api: uploadApi.batch,
      data: formData,
    });

    onSuccess(res);

    const newUrls = Array.isArray(res.list) ? res.list : [res.list];
    const newFiles: UploadFile[] = newUrls.map((item) => ({
      uid: item.url,
      name: item.url?.split("/").pop() || "",
      status: "done" as const,
      url: getDisplayUrl(item.url),
      thumbUrl: getDisplayUrl(item.url),
      // 保存原始相对路径
      response: { url: getRelativePath(item.url) }
    }));

    const newImageList = [...imageList, ...newFiles];
    setImageList(newImageList);

    // 更新表单值，使用相对路径
    const allUrls = newImageList
      .map((file) => file.response?.url || getRelativePath(file.url))
      .filter(Boolean);
    form.setFieldsValue({ images: allUrls });
  };

  // 处理图片列表删除
  const handleImagesRemove = (file: UploadFile) => {
    const newFileList = imageList.filter((item) => item.uid !== file.uid);
    setImageList(newFileList);
    // 更新表单值，使用相对路径
    const urls = newFileList
      .map((file) => file.response?.url || getRelativePath(file.url))
      .filter(Boolean);
    form.setFieldsValue({ images: urls });
  };

  // 处理分类选择改变
  const handleCategoryChange = async (value: string) => {
    const selectedCategory = categories.find((c) => c.id === value);
    if (selectedCategory) {
      setSelectedCategoryName(selectedCategory.name);
      // 清空品牌选择
      form.setFieldsValue({ brandId: undefined });
      setSelectedBrandName("");
      // 获取新选择的分类下的品牌列表
      await fetchBrands(value);
    } else {
      setBrands([]); // 如果没有选择分类，清空品牌列表
    }
  };

  // 处理品牌选择改变
  const handleBrandChange = (value: string) => {
    const selectedBrand = brands.find((b) => b.id === value);
    if (selectedBrand) {
      setSelectedBrandName(selectedBrand.name);
    }
  };

  // 监听采购价格和日期的变化
  useEffect(() => {
    const purchasePrice = form.getFieldValue("purchasePrice");
    const marketPrice = form.getFieldValue("marketPrice");
    const purchasePriceDate = form.getFieldValue("purchasePriceDate");
    const shareRatio = form.getFieldValue("shareRatio") || 0.3;

    if (purchasePrice && marketPrice) {
      // 只更新当前表单的计算值，不影响价格历史记录
      const recoveryPrice =
        purchasePrice + (marketPrice - purchasePrice) * (1 - shareRatio);
      const platformProfit = marketPrice - recoveryPrice;
      const userProfit = recoveryPrice - purchasePrice;

      form.setFieldsValue({
        recoveryPrice: parseFloat(recoveryPrice.toFixed(2)),
        platformProfit: parseFloat(platformProfit.toFixed(2)),
        userProfit: parseFloat(userProfit.toFixed(2)),
      });
    }
  }, [
    form.getFieldValue("purchasePrice"),
    form.getFieldValue("marketPrice"),
    form.getFieldValue("shareRatio"),
  ]);

  // 修改表单提交处理
  const handleSubmit = async (values: any) => {
    const finalPriceHistoryWithoutId = priceHistory.map(
      ({ _id, ...rest }) => rest
    );

    const finalValues = {
      ...values,
      mainImage: mainImageUrl ? mainImageUrl.replace(api, "") : "",
      categoryName: selectedCategoryName || initialValues?.categoryName,
      brandName: selectedBrandName || initialValues?.brandName,
      priceHistory: finalPriceHistoryWithoutId,
      images: imageList.map((file) =>
        file.url ? file.url.replace(api, "") : ""
      ),
    };

    try {
      if (initialValues?.id) {
        // 编辑模式
        const result = await handleRes({
          api: productApi.update,
          data: {
            ...finalValues,
            id: initialValues.id,
          },
        });
        if (result) {
          message.success("更新成功");
          onFinish?.(result);
          return true;
        }
      } else {
        // 创建模式
        const result = await handleRes({
          api: productApi.create,
          data: finalValues,
        });
        if (result) {
          message.success("创建成功");
          onFinish?.(result);
          return true;
        }
      }
    } catch (error) {
      console.error("操作失败:", error);
      message.error("操作失败");
      return false;
    }
  };

  const priceHistoryColumns = [
    {
      title: "日期",
      dataIndex: "date",
      key: "date",
      width: "15%",
      render: (
        text: string,
        record: ExtendedPriceHistoryItem,
        index: number
      ) => (
        <DatePicker
          value={moment(text)}
          onChange={(date) =>
            handleUpdatePriceHistory(index, "date", date?.format("YYYY-MM-DD"))
          }
          style={{ width: "100%" }}
        />
      ),
    },
    {
      title: "市场价",
      dataIndex: "marketPrice",
      key: "marketPrice",
      width: "15%",
      render: (
        text: number,
        record: ExtendedPriceHistoryItem,
        index: number
      ) => (
        <InputNumber
          value={text}
          onChange={(value) =>
            handleUpdatePriceHistory(index, "marketPrice", value)
          }
          min={0}
          precision={2}
          style={{ width: "100%" }}
        />
      ),
    },
    {
      title: "采购价",
      dataIndex: "purchasePrice",
      key: "purchasePrice",
      width: "15%",
      render: (
        text: number,
        record: ExtendedPriceHistoryItem,
        index: number
      ) => (
        <InputNumber
          value={text}
          onChange={(value) =>
            handleUpdatePriceHistory(index, "purchasePrice", value)
          }
          min={0}
          precision={2}
          style={{ width: "100%" }}
        />
      ),
    },
    {
      title: "分成比例",
      dataIndex: "shareRatio",
      key: "shareRatio",
      width: "15%",
      render: (
        text: number,
        record: ExtendedPriceHistoryItem,
        index: number
      ) => (
        <Select
          value={text}
          onChange={(value) =>
            handleUpdatePriceHistory(index, "shareRatio", value)
          }
          style={{ width: "100%" }}
        >
          <Select.Option value={0.1}>1成</Select.Option>
          <Select.Option value={0.15}>1.5成</Select.Option>
          <Select.Option value={0.2}>2成</Select.Option>
          <Select.Option value={0.25}>2.5成</Select.Option>
          <Select.Option value={0.3}>3成</Select.Option>
          <Select.Option value={0.35}>3.5成</Select.Option>
          <Select.Option value={0.4}>4成</Select.Option>
          <Select.Option value={0.45}>4.5成</Select.Option>
          <Select.Option value={0.5}>5成</Select.Option>
        </Select>
      ),
    },
    {
      title: "回收价格",
      dataIndex: "recoveryPrice",
      key: "recoveryPrice",
      width: "12%",
      render: (text: number) => <span>{text?.toFixed(2)}</span>,
    },
    {
      title: "平台利润",
      dataIndex: "platformProfit",
      key: "platformProfit",
      width: "12%",
      render: (text: number) => <span>{text?.toFixed(2)}</span>,
    },
    {
      title: "用户利润",
      dataIndex: "userProfit",
      key: "userProfit",
      width: "12%",
      render: (text: number) => <span>{text?.toFixed(2)}</span>,
    },
    {
      title: "操作",
      key: "action",
      width: "4%",
      render: (_: any, record: ExtendedPriceHistoryItem, index: number) => (
        <Button
          type="link"
          danger
          icon={<DeleteOutlined />}
          onClick={() => handleDeletePriceHistory(index)}
          style={{ padding: "4px" }}
        />
      ),
    },
  ];

  const groupTitleStyle = {
    fontSize: "14px",
    fontWeight: "bold",
    color: "#1890ff",
    borderLeft: "4px solid #1890ff",
    paddingLeft: "12px",
    marginBottom: "12px",
    display: "flex",
    alignItems: "center",
    position: "relative" as const,
    backgroundColor: "#e6f7ff",
    padding: "6px 12px",
    borderRadius: "4px",
  };

  const formGroupStyle = {
    backgroundColor: "#ffffff",
    padding: "16px",
    borderRadius: "8px",
    marginBottom: "12px",
    border: "1px solid #f0f0f0",
    boxShadow: "0 2px 4px rgba(0,0,0,0.02)",
  };

  const inputStyle = {
    width: "100%",
  };

  // 删除价格记录
  const handleDeletePriceHistory = (index: number) => {
    const newHistory = [...priceHistory];
    newHistory.splice(index, 1);
    setPriceHistory(newHistory);
  };

  // 添加新的价格记录
  const handleAddPriceHistory = () => {
    setEditingPrice(true);
    const marketPrice = form.getFieldValue("marketPrice") || 0;
    const purchasePrice = form.getFieldValue("purchasePrice") || 0;
    const shareRatio = form.getFieldValue("shareRatio") || 0.3;

    // 修正回收价格计算公式
    const recoveryPrice =
      purchasePrice + (marketPrice - purchasePrice) * (1 - shareRatio);
    const platformProfit = marketPrice - recoveryPrice;
    const userProfit = recoveryPrice - purchasePrice;

    const newDate = moment().format("YYYY-MM-DD");
    const newPrice: ExtendedPriceHistoryItem = {
      _id: `${newDate}_${priceHistory.length}`,
      date: newDate,
      marketPrice,
      purchasePrice,
      shareRatio,
      recoveryPrice: parseFloat(recoveryPrice.toFixed(2)),
      platformProfit: parseFloat(platformProfit.toFixed(2)),
      userProfit: parseFloat(userProfit.toFixed(2)),
    };

    const newHistory = [...priceHistory, newPrice];
    // 按日期排序
    newHistory.sort(
      (a, b) => moment(a.date).valueOf() - moment(b.date).valueOf()
    );
    setPriceHistory(newHistory);
  };

  // 更新价格记录
  const handleUpdatePriceHistory = (
    index: number,
    field: string,
    value: any
  ) => {
    const newHistory = [...priceHistory];
    const record = newHistory[index];
    newHistory[index] = {
      ...record,
      [field]: value,
    };

    // 当市场价、采购价或分成比例变化时，自动计算回收价格、平台利润和用户利润
    if (
      field === "marketPrice" ||
      field === "purchasePrice" ||
      field === "shareRatio"
    ) {
      const {
        marketPrice = 0,
        purchasePrice = 0,
        shareRatio = 0.3,
      } = newHistory[index];

      // 确保所有数值都是有效的数字
      const validMarketPrice = Number(marketPrice) || 0;
      const validPurchasePrice = Number(purchasePrice) || 0;
      const validShareRatio = Number(shareRatio) || 0.3;

      // 修正回收价格计算公式
      const recoveryPrice =
        validPurchasePrice +
        (validMarketPrice - validPurchasePrice) * (1 - validShareRatio);
      const platformProfit = validMarketPrice - recoveryPrice;
      const userProfit = recoveryPrice - validPurchasePrice;

      // 确保计算结果是有效的数字，如果无效则使用0
      newHistory[index] = {
        ...newHistory[index],
        marketPrice: validMarketPrice,
        purchasePrice: validPurchasePrice,
        shareRatio: validShareRatio,
        recoveryPrice: Number(recoveryPrice.toFixed(2)) || 0,
        platformProfit: Number(platformProfit.toFixed(2)) || 0,
        userProfit: Number(userProfit.toFixed(2)) || 0,
      };
    }

    // 按日期排序
    newHistory.sort(
      (a, b) => moment(a.date).valueOf() - moment(b.date).valueOf()
    );
    setPriceHistory(newHistory);
  };

  return (
    <ProForm
      form={form}
      initialValues={initialValues}
      onFinish={handleSubmit}
      submitter={{
        resetButtonProps: {
          style: {
            display: "none",
          },
        },
        submitButtonProps: {
          style: {
            width: "120px",
            height: "36px",
            borderRadius: "6px",
            fontSize: "14px",
            fontWeight: 500,
            boxShadow: "0 2px 8px rgba(24,144,255,0.2)",
          },
        },
        render: (props, dom) => {
          return (
            <div
              style={{
                display: "flex",
                justifyContent: "flex-end",
                width: "100%",
                marginTop: "20px",
                paddingRight: "16px",
                borderTop: "1px solid #f0f0f0",
                paddingTop: "16px",
              }}
            >
              {dom}
            </div>
          );
        },
      }}
      style={{
        padding: "12px",
      }}
    >
      <div style={{ display: "flex", gap: "16px" }}>
        {/* 左侧列 */}
        <div style={{ flex: 1, minWidth: 0 }}>
          {/* 基本信息 */}
          <ProForm.Group
            title="基本信息"
            collapsible
            style={formGroupStyle}
            titleStyle={groupTitleStyle}
          >
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: "16px",
              }}
            >
              <ProFormText
                name="name"
                label="商品名称"
                rules={[{ required: true, message: "请输入商品名称" }]}
                fieldProps={{ style: inputStyle }}
              />

              <ProFormText
                name="batchNo"
                label="批次号"
                rules={[{ required: true, message: "请输入批次号" }]}
                fieldProps={{ style: inputStyle }}
              />

              <ProFormSelect
                name="categoryId"
                label="商品分类"
                rules={[{ required: true, message: "请选择商品分类" }]}
                request={fetchCategories}
                fieldProps={{
                  onChange: handleCategoryChange,
                  style: inputStyle,
                }}
              />

              <ProFormSelect
                name="brandId"
                label="商品品牌"
                rules={[{ required: true, message: "请选择商品品牌" }]}
                options={brands.map((item) => ({
                  label: item.name,
                  value: item.id,
                }))}
                disabled={!form.getFieldValue("categoryId")}
                fieldProps={{
                  onChange: handleBrandChange,
                  style: inputStyle,
                }}
              />

              <ProFormText
                name="specification"
                label="规格"
                rules={[{ required: true, message: "请输入商品规格" }]}
                placeholder="如：500ml、100g等"
                fieldProps={{ style: inputStyle }}
              />

              <ProFormText
                name="unit"
                label="单位"
                rules={[{ required: true, message: "请输入商品单位" }]}
                placeholder="如：瓶、盒、件等"
                fieldProps={{ style: inputStyle }}
              />
            </div>
          </ProForm.Group>
        </div>

        {/* 右侧列 */}
        <div style={{ flex: 1, minWidth: 0 }}>
          {/* 图片信息 */}
          <ProForm.Group
            title="图片信息"
            collapsible
            style={formGroupStyle}
            titleStyle={groupTitleStyle}
          >
            <div style={{ display: "flex", gap: "16px", width: "100%" }}>
              <Form.Item
                label="商品主图"
                name="mainImage"
                rules={[{ required: true, message: "请上传商品主图" }]}
                style={{ flex: "0 0 200px", marginBottom: 16 }}
              >
                <Upload
                  listType="picture-card"
                  showUploadList={false}
                  customRequest={handleMainImageUpload}
                >
                  {mainImageUrl ? (
                    <img
                      src={getDisplayUrl(mainImageUrl)}
                      alt="主图"
                      style={{
                        width: "100%",
                        height: "100%",
                        objectFit: "cover",
                      }}
                    />
                  ) : (
                    <div>
                      <PlusOutlined />
                      <div style={{ marginTop: 4 }}>上传</div>
                    </div>
                  )}
                </Upload>
              </Form.Item>

              <Form.Item
                label="商品图片"
                name="images"
                rules={[{ required: true, message: "请上传商品图片" }]}
                style={{ flex: 1, marginBottom: 0 }}
              >
                <Upload
                  listType="picture-card"
                  fileList={imageList}
                  customRequest={handleImagesUpload}
                  onRemove={handleImagesRemove}
                  multiple
                  accept="image/*"
                >
                  {imageList.length >= 8 ? null : (
                    <div>
                      <PlusOutlined />
                      <div style={{ marginTop: 8 }}>上传</div>
                    </div>
                  )}
                </Upload>
              </Form.Item>
            </div>
          </ProForm.Group>
        </div>
      </div>

      {/* 其他信息（占满一行） */}
      <ProForm.Group
        title="其他信息"
        collapsible
        style={{ ...formGroupStyle, marginTop: "16px" }}
        titleStyle={groupTitleStyle}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "16px",
            width: "100%",
          }}
        >
          <Form.Item
            label="注意事项"
            name="precautions"
            style={{ marginBottom: 0, width: "100%" }}
          >
            <TextArea
              placeholder="请输入注意事项"
              autoSize={{ minRows: 3, maxRows: 6 }}
              style={{ width: "100%" }}
            />
          </Form.Item>
          <Form.Item
            label="备注"
            name="remark"
            style={{ marginBottom: 0, width: "100%" }}
          >
            <TextArea
              placeholder="请输入备注"
              autoSize={{ minRows: 3, maxRows: 6 }}
              style={{ width: "100%" }}
            />
          </Form.Item>
          <div style={{ display: "flex", gap: "16px" }}>
            <Form.Item
              label="排序"
              name="sort"
              style={{ flex: 1, marginBottom: 0 }}
            >
              <InputNumber placeholder="请输入排序" style={{ width: "100%" }} />
            </Form.Item>
            <Form.Item
              label="状态"
              name="status"
              style={{ flex: 1, marginBottom: 0 }}
            >
              <Switch />
            </Form.Item>
          </div>
        </div>
      </ProForm.Group>

      {/* 价格历史（占满一行） */}
      <ProForm.Group
        title="价格历史"
        collapsible
        style={{ ...formGroupStyle, marginTop: "16px" }}
        titleStyle={groupTitleStyle}
      >
        <Form.Item style={{ width: "100%", marginBottom: 0 }}>
          <PriceHistoryTable
            priceHistory={priceHistory}
            onAdd={handleAddPriceHistory}
            onUpdate={handleUpdatePriceHistory}
            onDelete={handleDeletePriceHistory}
          />
        </Form.Item>
      </ProForm.Group>

      <style>
        {`
          .ant-form-item {
            margin-bottom: 16px;
          }
          .ant-upload-list-picture-card {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
          }
          .ant-upload-list-picture-card .ant-upload-list-item,
          .ant-upload.ant-upload-select-picture-card {
            width: 104px;
            height: 104px;
            margin: 0;
          }
          .ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
            width: 100%;
            height: 100%;
          }
          .ant-upload-list-picture-card .ant-upload-list-item-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .ant-modal {
            width: 1200px !important;
            max-width: 90vw;
          }
          .ant-modal-body {
            background: #f5f5f5;
            padding: 16px;
            max-height: calc(100vh - 200px);
            overflow-y: auto;
          }
          .ant-modal-body::-webkit-scrollbar {
            width: 6px;
            height: 6px;
          }
          .ant-modal-body::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
          }
          .ant-modal-body::-webkit-scrollbar-track {
            background: #f5f5f5;
            border-radius: 3px;
          }
        `}
      </style>
    </ProForm>
  );
};

export default ProductForm;
